<template>
	<view class="">
	
		<view class="body" >
			<view class="top-container">
				<uni-list :border="false" >
					<!-- <uni-list-item :border="false" title="执行者" :rightText="userInfo.name" /> -->
					<uni-list-item :border="false" title="单据编号"  :rightText="header.billNo" />
					<uni-list-item :border="false" title="模具名称"  :rightText="header.materialName" />
					<uni-list-item :border="false" title="模具编码"  :rightText="header.materialNo" />
					<uni-list-item :border="false" title="仓位"  	:rightText="header.locationNo" />
					
					<uni-list-item :border="false" title="日期">
						<template v-slot:footer>
							<uni-dateformat  :date="header.createTime" format="yyyy年MM月dd日">
							</uni-dateformat>
						</template>
					</uni-list-item>
					<uni-list-item>
						<template v-slot:header>
						  <text  style="color: #333; font-weight: bold;">单据状态</text>
						</template>
						<template v-slot:footer>
						  <uni-tag :text="statusText" :type="statusType"   custom-style="color: #333; font-weight: bold;" >
							  
						  </uni-tag>
						</template>
					</uni-list-item>

				</uni-list>
				<!-- uni-list外单独放一栏 -->
				<view class="form-row" v-if="header.status == 2">
				  <text class="form-label">模具状态</text>
				  <view class="form-value">
				    <uni-data-select
					@change="change()"  
				      v-model="header.moldStatus"
				      :localdata="statusList"
				      placeholder="请选择模具状态"
				      :clear="false"
				      custom-style="color: #333; font-size: 14px; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; padding: 6rpx 12rpx; width: 100%;"
				    />
				  </view>
				</view>
				<view class="form-row" v-if="header.moldStatus == 2">
				  <text class="form-label">维修类型</text>
				  <view class="form-value">
				    <uni-data-select

				      v-model="header.category"
				      :localdata="categoryList"
				      placeholder="请选择维修类型"
				      :clear="false"
				      custom-style="color: #333; font-size: 14px; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; padding: 6rpx 12rpx; width: 100%;"
				    />
				  </view>
				</view>


			</view>
			
			
			
		</view>	
		<!--  底部按钮  -->
		<view class="footerPanel">
			<view class="footerPanel_body">
				<button v-if="header.status == 1" @click="pickScan" class="footerBtn scan" type="primary"><i
						class="iconfont icon-saomiao btn_icon"></i>扫码
				</button>
				<button v-if="header.status == 2" @click="auditMoldInspect" class="footerBtn save" ><i
						class="iconfont icon-duihao btn_icon" ></i>审核
				</button>
				
			</view>
		</view>
		<!-- 获取托盘信息 -->
		<GetMold ref="moldRef" @success="getMoldSuccess"></GetMold>
		
		<!-- 扫描托盘 -->
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import uniEmptyInfo from "../../vBase/components/uni-empty-info/uni-empty-info.vue"
	import {getMoldInspectDetail,
	moldInspectPickmold,
	auditMoldInspect,
	getMold
	} from '@/utils/api.js'
	import GetMold from "../pop/get_mold.vue"
	import trayPopup from '../../components/popup/trayPopup.vue'

	export default {
		components: {
			GetMold,
			uniEmptyInfo,
			trayPopup
		},
		data(){
			return{
				categoryList:[
					{
						text : '小修',
						value:0
					},
					{
						text : '大修',
						value:1
					}
				],
				statusList:[
					{
						text : '完成',
						value:1
					},
					{
						text : '维修',
						value:2
					},
					{
						text : '报废',
						value:3
					}
				],
				billNo: '',
				loading: true,
				header:{
					status : 0,
					category:0
				},
				detail:[],

				moldData:{},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FF4E74'
					}
				}],
			}
	},
	methods:{
		//审核模具检查单
		auditMoldInspect(){
			if (this.header.moldStatus == 0){
				uni.showToast({
					icon:'warning',
					title:'请选择模具状态'
				})
				return;
			}
			
			
			let _this = this;
			uni.showModal({
				title:'提示',
				content:'是否确认审核',
				success(res) {
					if (res.confirm){
						auditMoldInspect(_this.header ).then(result => {
						if (result.data.data){
							uni.showToast({
								title:'审核成功',
								icon:'none'
							})
						}
						setTimeout(() =>{
							uni.navigateBack({
								delta:1,
								success() {
									uni.$emit('update',{msg:'页面刷新'});
								}
							})
						},2000)
						
						})
					
					}
				}
			})
		},
		
		change(){
			console.log(this.header.category)
			if (this.header.moldStatus == 2){
				this.header.category = 0
			}
		},
		//添加成功后返回
		getMoldSuccess(e){
			this.initData()
		},

		//扫码成功后返回
		trayScanningScuess(e){
			let _this = this;
			uni.showModal({
				title:'仓位:' + e,
				content:'是否确认领用模具',
				success(res) {
					if (res.confirm){
						moldInspectPickmold({locationNo : e,inspectMap :_this.header }).then(result => {
						if (result.data.data){
							uni.showToast({
								title:'模具领用成功',
								icon:'none'
							})
						}
						_this.initData()
						
						})
					
					}
				}
			})
		},
		//扫码获取领料信息
		pickScan(){
			this.$refs.trayPopupRef.open()
		},
		// 获取详情数据
		initData(){
			getMoldInspectDetail({billNo :this.billNo,inspectMap : this.header}).then(res => {
				if (res.statusCode == 200){
					this.header = res.data.data.data
				} 
			})

		}
	},
	computed: {
	  statusText() {
	    if (this.header.status === 1) return '待检';
	    if (this.header.status === 2) return '检查中';
		if (this.header.status === 3) return '已检';

	    return '';
	  },
	  statusType() {
	      const status = Number(this.header.status)
	      if (status === 1) return 'warning'
	      if (status === 2) return 'primary'
	      return 'success'
	    }
	},
	watch: {
		userInfo() {
			
			}
		},
		mounted() {
			this.initData()

		},
	onLoad(e){
		this.billNo = e.billNo
		
	}
}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
	.form-row {
	  display: flex;
	  align-items: center;
	  padding: 20rpx 16rpx;
	  border-bottom: 1px solid #eee;
	}
	
	.form-label {
	  width: 200rpx;
	  font-size: 14px;
	  color: #333;
	  font-weight: bold;
	}
	
	.form-value {
	  flex: 1;
	}

</style>